<template>
  <div class="goods-images">
    <div class="left" :class="{ 'no-mar': align === 'vertical' }">
      <pic-zoom width="428px" height="428px"
        :translate="translate"
        :url="list[showIndex]"
        :big-url="list[showIndex]" :scale="2"/>
    </div>
    <div class="right" :class="{ block: align === 'vertical' }">
      <img
        class="thumbnail"
        :class="{ active: showIndex === index }"
        :src="item"
        v-for="(item, index) in list"
        :key="index"
        @click="showGoodsImageHandler(index)"/>
    </div>
  </div>
</template>

<script>
import PicZoom from '../common/PicZoom'

export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    // 排布方式
    align: {
      type: String,
      default: 'horizontal'
    }
  },

  data () {
    return {
      showIndex: 0
    }
  },

  computed: {
    translate () {
      // 如果当前是竖直排布
      if (this.align === 'vertical') {
        return '20px'
      }
      return '120px'
    }
  },

  methods: {
    /**
     * 点击图片，展示相应的图片
     * @param { Number } index 当前图片索引
     */
    showGoodsImageHandler (index) {
      this.showIndex = index
    }
  },

  components: {
    PicZoom
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable";

.goods-images {
  display: inline-block;
  position: relative;
  height: 430px;
  .left {
    display: inline-block;
    width: 430px;
    height: 100%;
    margin-right: 16px;
    &.no-mar {
      margin-right: 0px;
    }
  }
  .right {
    display: inline-block;
    height: 100%;
    .thumbnail {
      border: 2px solid transparent;
      cursor: pointer;
      display: block;
      width: 78px;
      height: 78px;
      margin-bottom: 5px;
      &.active {
        border-color: @font-color-golden;
      }
    }
    &.block {
      display: block;
      .thumbnail {
        display: inline-block;
        margin-right: 5px;
      }
    }
  }
}
</style>
